<template>
	<view class="uni-common-mt uni-ma-5">
		<da-city-selector :visible="citySelectorVisible" themeColor="#dd524d" :multiple="true" :multipleLimit="1"
			:cityValue="citySelectedValue" @confirm="handleConfirm" @close="handleClose"></da-city-selector>
    <wd-form>
      <wd-form-item label="目的城市" label-width="20%" size="large" center>
        <wd-input size="large" v-model="searchParams.city" @focus="onShowCitySelector()" placeholder="请点击此处选择城市" />
      </wd-form-item>
      <wd-cell-group>
        <wd-calendar label="入店日期" label-width="20%" size="large" v-model="searchParams.checkInDate" :min-date="minDate" />
      </wd-cell-group>
      <wd-cell-group>
        <wd-calendar label="离店日期" label-width="20%" size="large" v-model="searchParams.checkOutDate" :min-date="searchParams.checkInDate" />
      </wd-cell-group>
      <wd-cell-group>
        <wd-cell title="房间数量" size="large">
        <wd-input-number  v-model="searchParams.roomCount" :min="1" :max="100" />
        </wd-cell>
      </wd-cell-group>
      <view class="margin-top">
        <button @click="searchHotels2()" :loading="loading" type="primary">查询</button>
      </view>
      
      
    </wd-form>
    
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import DaCitySelector from '@/components/da-city-selector/index.vue'
  import {
		useHotelStore
	} from '@/store/hotel.js'
  import { timestampToDateFormat } from '@/utils/date_utils'

	const hotelStore = useHotelStore()

	let dataList = ref([])
	let loading = ref(false)
  const cityItems = ref([])
  const cityName = ref('上海')
  const cityCode = ref('SHA')
  const cityId = ref(2)

	function getSomeDate(addDays = 0) {
		const someDate = new Date();
		someDate.setDate(someDate.getDate() + addDays);
		const year = someDate.getFullYear();
		const month = String(someDate.getMonth() + 1).padStart(2, '0');
		const day = String(someDate.getDate()).padStart(2, '0');
		return `${year}-${month}-${day}`;
	}

	let today = ref('')
	let nextDay = ref('')
  const minDate = (new Date()).getTime()
	today.value = getSomeDate()
	nextDay.value = getSomeDate(+1)

	const searchParams = reactive({
		city: cityName,
		checkInDate: today.value,
		checkOutDate: nextDay.value,
		roomType: '',
		roomCount: 1
	})

	function searchHotels2() {
		hotelStore.setSearchParams({
			"cityId": cityId,
			cityName: cityName,
			checkInDate: timestampToDateFormat(searchParams.checkInDate),
			checkOutDate: timestampToDateFormat(searchParams.checkOutDate),
			hotelName: "",
			roomCount: searchParams.roomCount
		})

		uni.navigateTo({
			url: "/pages/hotel/HotelList"
		})
	}

	const citySelectedValue = ref(null)
	const citySelectorVisible = ref(false)

	function onShowCitySelector() {
		// 加载已选内容
    // console.log(cityItems.value)
		citySelectedValue.value = cityItems.value?.map((k) => k.id)
		citySelectorVisible.value = true
		// console.log("citySelectorVisible.value: ", citySelectorVisible.value)
	}

	function handleConfirm(val) {
    // console.log(val)
		cityItems.value = val || []
		try {
			cityId.value = cityItems.value[0].id
			cityCode.value = cityItems.value[0].three_code
			cityName.value = cityItems.value[0].name

			searchParams.city = cityName
		} catch (err) {
			console.log(err)
		}
		citySelectorVisible.value = false
	}

	function handleClose() {
		// console.log('handleClose ==>')
		citySelectorVisible.value = false
	}
</script>